<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=600, initial-scale=1, shrink-to-fit=no">
    <title>山长项目</title>
    <link rel="icon" href="./favicon.ico" type="image/x-icon"> 
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/reporting.css">
</head>

<body>
    <div id="home" v-cloak>
        <!-- 头部title -->
        <div class="container">
            <header class="head_top row">
                <div class="col">
                    <h1 class="head_top_tit">山长综合信息管理平台</h1>
                </div>
                <div class="col search">
                    <input class="head_top_inp fr" maxlength="10" type="text" placeholder="请输入关键字"
                        v-model.trim="keyWords" @keyup.enter="goDetails" />
                    <img class="search_img" src="./image/search@2x.png" alt="" @click="goDetails" />
                </div>
            </header>
        </div>
        <!-- 头部导航栏 -->
        <div class="container-fluid nav_back">
            <div class="container">
                <div class="head_nav">
                    <nav class="nav nav-pills nav-justified" id="head_nav">
                        <!-- target="_blank" 新窗口打开 -->
                        <a class="flex-sm-fill text-sm-center nav-link" :class="item.id == 5? 'actives':''"
                            v-for="item in headNav" :key="item.id" :href="item.url">
                            {{item.text}}</a>
                    </nav>
                </div>
            </div>
        </div>
        <!-- 中间展示图 -->
        <div class="container-fluid">
            <div class="con_banner"> </div>
        </div>
        <!-- 中间内容区 -->
        <div class="container-fluid clearfix mounColumnBg">
            <div class="container">
                <div class="reporting_form">
                    <div class="form_title">
                        <h2>互动参与</h2>
                        <p><i style="color: #CB0C0C">互动参与</i>，秀出山林之美</p>
                    </div>
                    <div class="form_deta">
                        <ul>
                            <li class="row">
                                <span class="col-2">姓 名:</span>
                                <input class="col-8" 
                                maxlength="5" v-model="name" type="text" placeholder="输入你的真实姓名">
                                 
                            </li>
                        
                            <li class="row">
                                <span class="col-2">手机号:</span>
                                <input class="col-8" v-model="phone" type="text" placeholder="输入你的手机号"> 
                            </li>
                            <li class="row">
                                <span class="col-2">反馈标题:</span>
                                <input class="col-8"  v-model="title" type="text" placeholder="输入标题"> 
                            </li> 
                            <li class="row">
                                <span class="col-2">山体名称:</span>
                                <div class="select_frame" @click="seleceInfo">
                                    <span>{{mounName}}</span>
                                    <img v-if="seleceArrow" class="seleame_imgs" src="./image/under.png" alt="">
                                    <img v-else class="seleame_imgs" src="./image/on.png" alt="">
                                    <ul class="seleame_list" v-show="!seleceArrow">
                                        <li class="seleame_item" v-for="item in mounTains" :key="item.id" @click.stop="mountainsLevel(item.id)">
                                            {{item.name}}
                                            <img class="youjiant" src="./image/youjiant.png" alt="">
                                        </li>  
                                    </ul>
                                    <ul class="seleame_list2" v-show="mounTainsLevel.length > 0" style="left: 230px">
                                        <li class="seleame_item" v-for="item in mounTainsLevel" :key="item.id" @click.stop="mounTainsLevels(item)">
                                            {{item.mountain_name}} 
                                        </li> 
                                     
                                    </ul>
                                </div> 
                            </li>
                        </ul>
                        <div class="textarea">
                            <textarea placeholder="请输入照片的描述" maxlength="300" v-model="desc"></textarea>
                            <ul class="up_img">
                               <li class="up_img_item" v-for="(item,index) in upImgList" :key="index">
                                <img :src="item" alt=""> 
                                <img class="delete" src="./image/delete.png" alt="" @click="deletes(index)">
                               </li>
                               <li class="up_img_item" v-show="upImgList.length < 3">
                                <img src="./image/upload@2x.png" alt="">
                                <span>上传图片</span>
                                <input type="file" ref="file" class="imgLocal" accept="image/*" @change="upImgs" multiple> 
                               </li>
                            </ul>
                            <div class="text_foo">
                                <span>{{desc.length}}/300</span>
                            </div>
                        </div>
                        <!-- 提交 -->
                        <div class="btn" @click="subSuperviseInfo(2)">
                            <span>提交</span>
                        </div>

                    </div>
                    <div class="report_msg">
                        <!-- <span class="report_msg_tit">上报信息</span> -->
                        <!-- <ul class="report_msg_list row">
                            <li class="report_msg_item col-6 row">
                                <img class="msg_item_img col-5" src="./image/free_stock_photo.jpg" alt="">
                                <div class="msg_item_info col-7">
                                    <span>主题: 千佛山植被破坏</span>
                                    <span>时间: 2020-08-22</span>
                                    <p>内容：千佛山是济南三大名胜之一内容：千佛山是济南三大名胜之一内容：千佛山是济南三大名胜之一内容：千佛山是济南三大名胜之一 </p>
                                </div>
                            </li>
                            <li class="report_msg_item col-6 row">
                                <img class="msg_item_img col-5" src="./image/free_stock_photo.jpg" alt="">
                                <div class="msg_item_info col-7">
                                    <span>主题: 千佛山植被破坏</span>
                                    <span>时间: 2020-08-22</span>
                                    <p>内容：千佛山是济南三大名胜之一内容：千佛山是济南三大名胜之一内容：千佛山是济南三大名胜之一内容：千佛山是济南三大名胜之一 </p>
                                </div>
                            </li>
                            <li class="report_msg_item col-6 row">
                                <img class="msg_item_img col-5" src="./image/free_stock_photo.jpg" alt="">
                                <div class="msg_item_info col-7">
                                    <span>主题: 千佛山植被破坏</span>
                                    <span>时间: 2020-08-22</span>
                                    <p>内容：千佛山是济南三大名胜之一内容：千佛山是济南三大名胜之一内容：千佛山是济南三大名胜之一内容：千佛山是济南三大名胜之一 </p>
                                </div>
                            </li>
                            <li class="report_msg_item col-6 row">
                                <img class="msg_item_img col-5" src="./image/free_stock_photo.jpg" alt="">
                                <div class="msg_item_info col-7">
                                    <span>主题: 千佛山植被破坏</span>
                                    <span>时间: 2020-08-22</span>
                                    <p>内容：千佛山是济南三大名胜之一内容：千佛山是济南三大名胜之一内容：千佛山是济南三大名胜之一内容：千佛山是济南三大名胜之一 </p>
                                </div>
                            </li>
                            <li class="report_msg_item col-6 row">
                                <img class="msg_item_img col-5" src="./image/free_stock_photo.jpg" alt="">
                                <div class="msg_item_info col-7">
                                    <span>主题: 千佛山植被破坏</span>
                                    <span>时间: 2020-08-22</span>
                                    <p>内容：千佛山是济南三大名胜之一内容：千佛山是济南三大名胜之一内容：千佛山是济南三大名胜之一内容：千佛山是济南三大名胜之一 </p>
                                </div>
                            </li>
                            <li class="report_msg_item col-6 row">
                                <img class="msg_item_img col-5" src="./image/free_stock_photo.jpg" alt="">
                                <div class="msg_item_info col-7">
                                    <span>主题: 千佛山植被破坏</span>
                                    <span>时间: 2020-08-22</span>
                                    <p>内容：千佛山是济南三大名胜之一内容：千佛山是济南三大名胜之一内容：千佛山是济南三大名胜之一内容：千佛山是济南三大名胜之一 </p>
                                </div>
                            </li>

                        </ul>  -->
                        <!-- 分页 -->
                        <!-- <div class="report_foo">
                            <ul class="nav">
                                <li class="nav_item">首页</li>
                                <li class="nav_item isShowNav">1</li>
                                <li class="nav_item">2</li>
                                <li class="nav_item">3</li>
                                <li class="nav_item">4</li>
                                <li class="nav_item">...</li>
                                <li class="nav_item">8</li>
                                <li class="nav_item">9</li>
                                <li class="nav_item">10</li>
                                <li class="nav_item">
                                    下一页
                                </li>
                            </ul>
                        </div> -->
                    </div> 
                </div>

            </div>
        </div>
        <div class="notifications" v-show="isShownotifica">
            <span>{{notificaInfo}}</span>
        </div>
        <!-- 底部导航 -->
        <div class="container-fluid foo_nav_back">
            <div class="container">
                <div class="head_nav">
                    <nav class="nav nav-pills nav-justified" id="head_nav">
                        <!-- target="_blank" 新窗口打开 -->
                        <a class="flex-sm-fill text-sm-center nav-link" :class="item.id == 5? 'actives':''"
                            v-for="item in headNav" :key="item.id" :href="item.url">
                            {{item.text}}</a>
                    </nav>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="container-fluid footerColumnBg">
            <div class="container">
                <footer class="footer">
                    <div class="footer_foo">
                        <h2 class="footer_tit">山长综合信息管理平台</h2> 
                    </div>
                </footer>
            </div>
        </div>
        <!-- 返回顶部按钮 -->
        <div class="back_top disp_none">
            <img class="back_top_img" src="./image/top.jpg" alt="">
            <span>返回顶部</span>
        </div>
    </div>
    <!-- vue -->
    <script src="./js/vue.js"></script>
    <!-- vuex数据管理仓库 -->
    <script src="./js/vuex.js"></script>
    <!-- vuex 数据仓库 -->
    <script src="./utils/store.js"></script>
    <!-- jq -->
    <script src="./js/jquery-3.5.1.min.js"></script>
    <!-- bt -->
    <script src="./js/bootstrap.min.js"></script>
    <!-- bootstrap 插件的js文件 -->
    <script src="./js/popper.min.js"></script> 
    <!-- axios请求 -->
    <script src="./js/axios.min.js"></script>
    <!-- http - axios 全局封装 -->
    <script src="./api/http.js"></script> 
    <!-- 全局js工具函数以公共js -->
    <script src="./utils/global.js"></script>
    <!-- 请求 -->
    <script src="./api/api.js"></script>
    <!-- 项目数据 -->
    <script src="./js/home.js"></script>

</body>

</html>